*{
    margin: 0;
}

.top{
    width: 100vw;  /*视窗宽度，1vw=视窗宽度的1% */
    height: 100vh;  /*视窗高度，1vh=视窗高度的1% */
    background-image: url(../yuanshen/haibao1.jpg);
    background-size: cover;
}

.bottom{
    width: 100vw;
    height: 100vh;
    background-image: url(../yuanshen/haibao2.jpg);
    background-size: cover;
    text-align: center;
    color: grey;
}

.top_nav{
    width: 100vw;
    height: 100px;
    background: rgba(0,0,0,0.3);/*rgba(0,0,0,0.3)这种设计风格的背景可以带有透明度，如果单纯用background: black这种设计风格会把背景挡住很不好看*/
}

.top_nav img{
    height: 100px;
    margin-left: 100px;
    float: left;
}

.top_nav ul{
    width: 1200px;
    height: 100px;
    float: left;
    padding: 0px; /*内边距*/
    margin: 0px; /*外边距*/
}

.top_nav ul li{
    width: 150px;
    height: 100px;
    line-height: 100px;/*和logo同高度，使得标签和logo对齐*/
    float: left;
    font-size: 24px;
    color: white;
    list-style: none;/*处理掉标签前面的小圆点*/
    text-align: center;
    margin-left: 50px;
}

.top_nav ul li:hover{
    text-shadow: 0px 0px 5px gold;/*实现鼠标移到字体上显示橘色*/
    border-bottom: 3px solid white;/*3个像素的白色偏橘色*/
}

.loadbtn{
    width: 300px;
    height: 70px;
    font-size: 20px;
    color: white;
    background: linear-gradient(to right,black,#5691c8);/*渐变色，从左到右，从黑到蓝*/
    border: none;/*去掉边框*/
    border-radius: 10px;/*将边框的角变成圆角*/
    border-bottom-right-radius: 60px;/*将底部右边的圆角变得更圆*/
    border-top-left-radius: 60px;/*将顶部右左边的圆角变得更圆*/
    position: absolute;/*绝对布局*/
    bottom: 100px;
    left: 50%;
    box-shadow: 0px 0px 10px gold;/*给开始下载盒子的周边附带橘色的光芒*/
    animation: btn_anim 1s infinite;/*以1S的速度无限循环颜色变化*/
    margin-left: -150px;
    cursor: pointer;/*鼠标滑过变成点击的形式*/
}

/*实现下载过程没到一个百分比颜色都变化*/
@keyframes btn_anim{
    10%{
        background: linear-gradient(to right,black 10%,#5691c8);
    }
    30%{
        box-shadow: 0px 0px 10px red;
        background: linear-gradient(to right,black 30%,#5691c8);
    }
    50%{
        background: linear-gradient(to right,black 50%,#5691c8);
    }
    70%{
        box-shadow: 0px 0px 10px blueviolet;
        background: linear-gradient(to right,black 70%,#5691c8);
    }
    90%{
        background: linear-gradient(to right,black 90%,#5691c8);
    }
}

.bottom_nav{
    width: 100vw;
    height: 40vh;
    background: rgba(0,0,0,0.3);
    position: absolute;
    top: 170vh;
}
.bottom_nav img{
    width: 215px;
    height: 190px;
}
